<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.0.js"></script>
    <style>

       body{
           background-color: black;
       }     

       *{
           margin: auto;
       }
     
        ul{
            border: 1px solid white;
            list-style: none;   
            width: 660px;
            height: 430px; 
            margin-top: 150px;   
                   
        }

        li{
            float: left;
           margin: 18px 5px 0 5px;
        }


    </style>
</head>
<body>
    <div >
        <ul>
            <li>
                <img src="./images/01.jpg" >
            </li>
            <li>
                <img src="./images/02.jpg" >
            </li>
            <li>
                <img src="./images/03.jpg" >
            </li>
            <li>
                <img src="./images/04.jpg" >
            </li>
            <li>
                <img src="./images/05.jpg" >
            </li>
            <li>
                <img src="./images/06.jpg" >
            </li>
        </ul>
    </div>
    <script >

            //鼠标进入当前图片时，该图片的透明度为1，其他图片的透明度为0.4
            $('li').stop().mouseenter(function(){
                $(this).css({
                    opacity: '1',
                })
                $(this).siblings('li').css({
                    opacity: '0.4',
                })                               
            //鼠标离开所有图片后，所有图片的透明度都为1。           
            })
            $('li').stop().mouseleave(function(){
                $('li').css({
                    opacity: '1',
                })
            })


    </script>
</body>
</html>